import React from 'react';
import { Carousel, Card } from 'antd';
import { LeftOutlined, RightOutlined } from '@ant-design/icons';
import './CarouselBanner.scss';

interface BannerItem {
  id: string;
  title: string;
  description: string;
  image: string;
  link?: string;
}

interface CarouselBannerProps {
  banners: BannerItem[];
}

const CarouselBanner: React.FC<CarouselBannerProps> = ({ banners }) => {
  const handleBannerClick = (banner: BannerItem) => {
    if (banner.link) {
      window.open(banner.link, '_blank');
    }
  };

  return (
    <div className="carousel-banner">
      <Carousel
        autoplay
        autoplaySpeed={4000}
        dots={{ className: 'custom-dots' }}
        arrows
        prevArrow={<LeftOutlined />}
        nextArrow={<RightOutlined />}
      >
        {banners.map((banner) => (
          <div key={banner.id} className="banner-item">
            <Card
              className="banner-card"
              onClick={() => handleBannerClick(banner)}
              cover={
                <div className="banner-image">
                  <img src={banner.image} alt={banner.title} />
                  <div className="banner-overlay">
                    <div className="banner-content">
                      <h3 className="banner-title">{banner.title}</h3>
                      <p className="banner-description">{banner.description}</p>
                    </div>
                  </div>
                </div>
              }
            />
          </div>
        ))}
      </Carousel>
    </div>
  );
};

export default CarouselBanner;
